<template>
    <layout>
        <mt-header title="精选问答">
                <mt-button slot="left" icon="back"></mt-button>
        </mt-header>

        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <ul class="ui_list page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                <li class="item" v-for="item in list" @click="">
                    <a :href="'/answer/detail/' + item.id" class="wd_box">
                        <div class="wd-img">
                            <img :src="api.image + item.headImgUrl"/>
                            <div class="title">英语交流</div>
                            <p class="title_bt">有12345你解答</p>
                        </div>
                        <div class="wd_content">
                            <div class="wd_wt">{{ item.title }}</div>
                            <div class="wd_hd">回答12</div>
                            <div class="wd_zs">
                                <div>答</div>
                                <p>我知道! 我知道! 我知道! 重要的事说三遍我知道! 我知道! 我知道! 重要的事说三遍我道! 我知道!我知道! 重要的事......</p>
                            </div>
                        </div>
                        <div class="wd_footer">
                            <div class="footer_wt">我知道! 我知道! 我知道!! </div>
                            <div class="footer_hd">回答12</div>
                        </div>
                    </a>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                <span>加载中...</span>
            </p>
        </div>
    </layout>
</template>
<style lang="scss">
    @import "index";
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                selected: '1',
                list: [],
                lastPage: false,
                pageNo: 0,
                nextPage: 1,
                sort: 0,
                type: '',
                loading: false,
                wrapperHeight: 0
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            showImage(url, params){
                return image(this.api.image, params);
            },
            loadMore(){
                if (this.lastPage){
                    return;
                }

                this.loading = true;
                this.$http.get('/api/question/list', {
                    params: {
                        pageNo: this.nextPage
                    }
                }).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            data = data.data;
                            this.lastPage = data.lastPage;
                            this.pageNo = data.pageNo;
                            this.nextPage = data.nextPage;

                            let list = data.list;
                            for (let i = 0; i < list.length; i++){
                                this.list.push(list[i]);
                            }

                        }

                    }else{
                        this.lastPage = true;
                    }
                    this.loading = false;


                })
            },
        },
        created(){
        },
        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    }
</script>

